<template>
    <div id="background">
        <div id="logo">MYSYSTEM</div>
        <div id="login">
            <el-card class="box-card">
                <div id="from">
                    <el-input v-model="username" placeholder="请输入账号"></el-input>
                    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
                    <el-button type="primary">登录</el-button>
                </div>
            </el-card>
        </div>
        <div id="clock">
            <div id="time">{{time}}</div>
            <div id="data">{{data}}</div>
        </div>
    </div>
</template>
<style scoped>
#background{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(
        90deg,
        rgb(8, 113, 148),
        rgb(30, 3, 45)
        
    );
    background-size: 400%;
    animation: myanimation 10s infinite;
}
@keyframes myanimation{
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}
#logo{
    color: white;
    font-size: 25px;
    font-weight: 800;
    position: absolute;
    top:15%;
    left:15%;
}
#login{
    position: absolute;
    top: 30%;
    left: 35%;
}
.el-card {
   width: 400px;
   height: 230px;
   background-color: rgba(255, 255, 255, 0.4);
   border-radius: 15px;
}
#from{
    line-height: 60px;
    padding-left: 15px;
    padding-right: 15px;
}
#clock{
    color: white;
    position: absolute;
    top:70%;
    left: 15%;
    text-align: left;
}
#time{
    font-size: 100px;
}
#data{
    font-size: 25px;
}
</style>
<script>
export default {
    data(){
        return{
            username:"",
            password:"",
            time:"",
            data:"",
        }
    },
    mounted(){
        this.$nextTick(()=>{
            setInterval(this.update_clock,1000);
        })
    },
    methods:{
        update_clock:function(){
            var d=new Date();
            var year=d.getFullYear();
            if(year<10){
                year="0"+year
            }
            var mon=d.getMonth();
             if(mon<10){
                mon="0"+mon
            }
            var day=d.getDate();
             if(day<10){
                day="0"+day
            }
            var hour=d.getHours();
             if(hour<10){
                hour="0"+hour
            }
            var minute=d.getMinutes();
             if(minute<10){
                minute="0"+minute
            }
            this.time=hour+":"+minute;
            this.data=year+"/"+mon+"/"+day;
        }
    }
}

</script>